<template>
    <div class="create-panel">
        <div class="step-panel">
            <el-steps class="create-steps" :active="currentStep - 1" finish-status="success" align-center>
                <el-step title="选择模板" />
                <el-step title="项目信息" />
                <el-step title="完成创建" />
            </el-steps>
        </div>
        <div class="step-main">
            <!-- 步骤内容 -->
            <div v-if="currentStep === 1" class="step-content-1">
                <!-- 第一步的内容 -->
                <div v-for="item in 3" :key="item">
                    <TemplateItem @selectTemplate="nextStep" />
                </div>
            </div>
            <div v-else-if="currentStep === 2" class="step-content-2">
                <!-- 第二步的内容 -->
                <ProjectForm :currentStep="currentStep" @prevStep="prevStep" @nextStep="nextStep" />
            </div>
            <div v-else-if="currentStep === 3" class="step-content-3">
                <!-- 第三步的内容 -->
                <div class="controls">
                    <el-button v-if="currentStep > 1" @click="prevStep">上一步</el-button>
                    <el-button v-if="currentStep == 3" type="success" @click="finish">完成创建</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { defineEmits } from "vue";
import TemplateItem from '@/components/project/templateItem.vue'
import ProjectForm from '@/components/project/projectForm.vue'

// 定义一个 closeDialog 函数，用于子组件向父组件发出事件,关闭Dialog窗口
const emitCloseDialog = defineEmits(['closeDialog']);

const active = ref(0)

let currentStep = ref(1);

//定义项目表单数据对象
// 定义对象
let projectFormData = ref({
    name: '',
    type: '',
    description: ''
});

function nextStep(num,data) {
    if(currentStep.value==2){
        currentStep.value++;
        projectFormData.value = data         
    }
    if (currentStep.value < 3) {
        currentStep.value++;               
    }
    
}

function prevStep() {
    if (currentStep.value > 1) {
        currentStep.value--;
    }
}

function finish() {
    //成功消息
    ElMessage({
        message: "项目创建完成",
        type: "success",
    });
    //触发关闭Dialog窗口,同时将新增数据返回给父组件用于增加数组
    emitCloseDialog('closeDialog', false,projectFormData.value);
    //提交数据
    console.log(projectFormData.value);
    //重置步骤
    currentStep = ref(1);
}
</script>

<style lang="scss" scoped>
.create-panel {
    min-width: 860px;

    //控制步骤
    .step-panel {
        display: flex;
        justify-content: center;

        .create-steps {
            min-width: 600px;
            max-width: 780px;
        }
    }

    //控制内容
    .step-main {
        margin: 20px 0 0;


        .step-content-1 {
            display: grid;
            grid-auto-flow: row;
            grid-template-columns: repeat(auto-fill, 317px);
            justify-content: center;
            grid-gap: 16px;
            gap: 16px;
            width: 100%;
            min-height: 400px;
            background: #ffffff;
        }

        .step-content-2 {
            width: 100%;
            min-height: 300px;
        }

        .step-content-3 {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            width: 100%;
            min-height: 300px;
        }
    }

    //步骤操作
    .controls {
        margin: 50px 0 20px 0;
        display: flex;
        justify-content: flex-end;
    }
}
</style>
